import React, { Component }from 'react';
import { connect } from 'react-redux';
import { getCitiesList, editCity } from 'action/app.js';
import 'css/city.less';

class City extends Component{
    constructor(props) {
        super(props);
        this.getCityList()
    }  
    getCityList(){
        this.props.getCityList();
    }
    changeCity(id){
        this.props.changeCity(id);
    }
    //生成26个大写字母
    generateBig() {
        let str = [];
        for (let i = 65; i < 91; i++) {
            str.push(String.fromCharCode(i));
        }
        return str;
    }
    render(){
        let cityList = this.props.app.cityList?JSON.parse(this.props.app.cityList).map((city) => {
             
            return(
                <div className="cities-list">
                    <div className="city-letter" key={city.key}><a name={city.key} >{city.key}</a></div>
                    {
                        item.city.map((item) => {
                            return(
                                <p className="city-name" onClick = {() => {changeCity(item.id)}}>{item.name}</p>
                            )
                            
                        })
                    }
                </div>
            )
        }):''
        let letterList = this.generateBig();
        let letters = letterList.map(function(letter){
            let target = "#"+letter;
            return (
                <a href={target}>{letter}</a>
            )
        });
        return(
            <div className="content">
                <div className="letter-list">{letters}</div>
                <div className="now-city">
                    当前城市：{this.props.app.city}
                </div>
                <div className="city-block">
                    <div className="cities-title">已开通城市</div>
                    {cityList}
                </div>
            </div>
        );
    }
}
const cityData = (state) => {
    return {
        app: state.app
    }
}
let dispatchHandle = (dispatch, getState) => {
    return {
        getCityList: function(){
            dispatch(getCitiesList());
        },
        changeCity: function(id){
            let params = {
                id: id
            }
            dispatch(editCity(params));
        }
    }
    
}
let visibileCity= connect(cityData,dispatchHandle)(City);


export default visibileCity;